<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js+canvas图片合成</title>

<style>
img {
	border: solid 1px #ddd;
}
</style>

</head>
<body>

<div align="center"> 
	<!-- <img src="1.png" width="300">  -->
	<img id="img1" width="50" height="50"> 
	<div class="dv">

                            添加
        <input type="file" name="" id="inp" value="">

                        </div>
</div>

<div id="imgBox" align="center">
  <input type="button" value="一键合成" onclick="hecheng()">
</div>
<div style="text-align: center;" style="margin-top: 20px;">
	<div>
			<span>未裁剪版本(鼠标右键图片另存为)</span>
			<div id="showBox" align="center" >
			</div>
	</div>
	<div>
			<span style="margin-top: 30px;">裁剪版本(鼠标右键图片另存为)</span>
			<div align="center" >
				
				<canvas id="canvas" width="400" height="400"></canvas>
			</div>
	</div>
		
		
</div>


<script>
	// 合成整体思路  先将两张图片合成 其次再对图片进行裁剪



	//圆角矩形
CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
	console.log(111)
    var min_size = Math.min(w, h);
    if (r > min_size / 2) r = min_size / 2;
    // 开始绘制
    this.beginPath();
    this.moveTo(x + r, y);
    this.arcTo(x + w, y, x + w, y + h, r);
    this.arcTo(x + w, y + h, x, y + h, r);
    this.arcTo(x, y + h, x, y, r);
    this.arcTo(x, y, x + w, y, r);
    this.closePath();
    return this;
}


function onePicture(){
		// canvas元素, 图片元素
	var canvas = document.querySelector("#canvas")
	var context = canvas.getContext("2d");

	var draw = function(obj) {
		// 创建图片纹理
		var pattern = context.createPattern(obj, "no-repeat");

		context.roundRect(0, 0, obj.width, obj.height, 26);
		
		// 填充绘制的圆
		context.fillStyle = pattern;
		context.fill();    
	}
	let imgP =	document.getElementById("cansPic")

	imgP.onload = function() {
		draw(this);
	};
	

}





var inp = document.getElementById("inp");
inp.onchange = function(e){
	console.log( e.target.files[0])
	let filereader = new FileReader();    //创建FileReader对象

	filereader.readAsDataURL(e.target.files[0]);    //对选中的图片进行base64编码
	filereader.onload=function(e){
		let img1 =	document.getElementById("img1")
		 img1.src = this.result; 
		 img1.style.display = "block"
	}
	 
	 console.log(filereader)
}



function hecheng(){
	draw(function(){
		
		document.getElementById('showBox').innerHTML='<img id="cansPic" src="'+base64[0]+'">';

		onePicture()
	}
	
	)	
}

var data=['1.png','1.png'],base64=[];
function draw(fn){
	base64=[];
	var c=document.createElement('canvas'),
		ctx=c.getContext('2d'),
		len=data.length;
		c.width=400;
		c.height=400;
		ctx.rect(0,0,c.width,c.height);
		ctx.fillStyle='#fff';
		ctx.fill();
		
	function drawing(n){
		if(n<len){
			var img=new Image;
			img.src=data[n];
			img.onload=function(){
				if(n==1){
					
					ctx.drawImage(img,0,0,400,400);
				}else{
					let newimg = document.getElementById("img1")

					ctx.drawImage(newimg,10,10,380,380);
					
				}
				drawing(n+1);//递归
			}
		}else{
			//保存生成作品图片
			base64.push(c.toDataURL("image/jpeg",0.8));
			fn();
		}
	}
	drawing(0);
}








</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

</div>
</body>
</html>